<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Neon Admin Panel">
    <meta name="author" content="">

    <title>Neon | Forms</title>


    <link rel="stylesheet" th:href="@{/css/jquery-ui-1.10.3.custom.min.css}">
    <link rel="stylesheet" th:href="@{/css/entypo.css}">
    <link rel="stylesheet" th:href="@{/css/css.css}">
    <link rel="stylesheet" th:href="@{/css/bootstrap.css}">
    <link rel="stylesheet" th:href="@{/css/neon-core.css}">
    <link rel="stylesheet" th:href="@{/css/neon-theme.css}">
    <link rel="stylesheet" th:href="@{/css/neon-forms.css}">
    <link rel="stylesheet" th:href="@{/css/custom.css}">

    <script src="@{/js/jquery-1.11.0.min.js"></script>

    <!--[if lt IE 9]>
    <script src="assets/js/ie8-responsive-file-warning.js"></script><![endif]-->

    <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
    <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->

    <style>
        .hight-forAdd {
            margin-top: 530px;
        }
    </style>

</head>
<body class="page-body" data-url="http://neon.dev">

<div class="page-container">
    <!-- add class "sidebar-collapsed" to close sidebar by default, "chat-visible" to make chat appear always -->

    <div class="sidebar-menu">
        <header class="logo-env">
            <!-- logo -->
            <div class="logo">
                <a th:href="@{/api/index}">
                    <img th:src="@{/picture/logo-2x.png}" width="120" alt="">
                </a>
            </div>
            <div class="sidebar-collapse">
                <a href="#" class="sidebar-collapse-icon with-animation">
                    <!-- add class "with-animation" if you want sidebar to have animation during expanding/collapsing transition -->
                    <i class="entypo-menu"></i>
                </a>
            </div>
            <div class="sidebar-mobile-menu visible-xs">
                <a href="#" class="with-animation"><!-- add class "with-animation" to support animation -->
                    <i class="entypo-menu"></i>
                </a>
            </div>
        </header>
        <ul id="main-menu" class="">
            <!--用户管理-->
            <!--需要有admin角色和manager角色才能查看此菜单 | 以下的雷同-->
            <li th:if="${session.list.contains('admin')} and ${session.list.contains('manager')}">
                <a th:href="forms-main.html">
                    <i class="entypo-doc-text"></i>
                    <span>用户管理</span>
                </a>
                <ul>
                    <li>
                        <a th:href="@{/api/users}">
                            <span>用户列表</span>
                        </a>
                    </li>
                </ul>
            </li>
            <!--角色管理-->
            <li th:if="${session.list.contains('admin')}">
                <a th:href="forms-main.html">
                    <i class="entypo-doc-text"></i>
                    <span>角色管理</span>
                </a>
                <ul>
                    <li>
                        <a th:href="@{/api/roles}">
                            <span>角色列表</span>
                        </a>
                    </li>
                </ul>
            </li>
            <!--商品管理-->
            <li>
                <a th:href="forms-main.html">
                    <i class="entypo-doc-text"></i>
                    <span>商品管理</span>
                </a>
                <ul>
                    <li>
                        <a th:href="@{/api/goods}">
                            <span>商品列表</span>
                        </a>
                    </li>
                    <li>
                        <a th:href="@{/api/categorys}">
                            <span>分类列表</span>
                        </a>
                    </li>
                    <li>
                        <a th:href="@{/api/orders}">
                            <span>订单列表</span>
                        </a>
                    </li>
                </ul>
            </li>
            <!--新闻管理-->
            <li>
                <a th:href="forms-main.html">
                    <i class="entypo-doc-text"></i>
                    <span>新闻管理</span>
                </a>
                <ul>
                    <li>
                        <a th:href="@{/api/news}">
                            <span>新闻列表</span>
                        </a>
                    </li>
                </ul>
            </li>
        </ul>
    </div>
    <div class="main-content">

        <div class="row">
            <!-- Profile Info and Notifications -->
            <div class="col-md-6 col-sm-8 clearfix">
                <ul class="user-info pull-left pull-none-xsm">
                    <!-- Profile Info -->
                    <li class="profile-info dropdown"><!-- add class "pull-right" if you want to place this from right -->
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                            <img th:src="@{${session.user.avatar}}" alt="da" class="img-circle" width="44">
                            <a href="" th:text="${session.user.nickName}"></a>
                        </a>
                        <ul class="dropdown-menu">
                            <!-- Reverse Caret -->
                            <li class="caret"></li>
                            <!-- 个人信息 -->
                            <li>
                                <a th:href="extra-timeline.html">
                                    <i class="entypo-user"></i>
                                    个人信息
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <i class="entypo-clipboard"></i>
                                    修改密码
                                </a>
                            </li>
                        </ul>
                    </li>
                </ul>
            </div>


            <!-- 退出登录 -->
            <div class="col-md-6 col-sm-4 clearfix hidden-xs">
                <ul class="list-inline links-list pull-right">
                    <li>
                        <a th:href="@{/api/logout}">
                            退出登录 <i class="entypo-logout right"></i>
                        </a>
                    </li>
                </ul>

            </div>

        </div>

        <hr>
        <ol class="breadcrumb bc-3">
            <li>
                <a th:href="@{/api/index}"><i class="entypo-home"></i>首页</a>
            </li>
            <li>
                <a href="">添加</a>
            </li>
        </ol>
        <br>
        <div class="row">
            <div class="col-md-12">

                <div class="panel panel-primary" data-collapsed="0">

                    <div class="panel-heading">
                        <div class="panel-options">
                            <a href="#" data-rel="collapse"><i class="entypo-down-open"></i></a>
                            <a href="#" data-rel="reload"><i class="entypo-arrows-ccw"></i></a>
                        </div>
                    </div>

                    <div class="panel-body">
                        <form role="form" th:action="@{/api/doAddForCate}" th:method="post" class="form-horizontal form-groups-bordered">
                            <div class="form-group">
                                <label for="field-1" class="col-sm-3 control-label">分类名称</label>
                                <div class="col-sm-5">
                                    <input type="text" name="name" class="form-control" id="field-1" placeholder="请输入分类名称">
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-3 control-label">分类状态</label>

                                <div class="col-sm-5">
                                    <select class="form-control" name="status">
                                        <option value="1">正常</option>
                                        <option value="2">冻结</option>
                                    </select>
                                </div>
                            </div>
                            <div class="form-group">
                                <div class="col-sm-offset-3 col-sm-5">
                                    <button type="submit" class="btn btn-default">添加</button>
                                </div>
                            </div>
                        </form>
                        <div class="hight-forAdd"></div>
                    </div>

                </div>

            </div>
        </div>
    </div>


    <div id="chat" class="fixed" data-current-user="Art Ramadani" data-order-by-status="1" data-max-chat-history="25">

        <div class="chat-inner">


            <h2 class="chat-header">
                <a href="#" class="chat-close" data-animate="1"><i class="entypo-cancel"></i></a>

                <i class="entypo-users"></i>
                Chat
                <span class="badge badge-success is-hidden">0</span>
            </h2>


            <div class="chat-group" id="group-1">
                <strong>Favorites</strong>

                <a href="#" id="sample-user-123" data-conversation-history="#sample_history"><span
                        class="user-status is-online"></span> <em>Catherine J. Watkins</em></a>
                <a href="#"><span class="user-status is-online"></span> <em>Nicholas R. Walker</em></a>
                <a href="#"><span class="user-status is-busy"></span> <em>Susan J. Best</em></a>
                <a href="#"><span class="user-status is-offline"></span> <em>Brandon S. Young</em></a>
                <a href="#"><span class="user-status is-idle"></span> <em>Fernando G. Olson</em></a>
            </div>


            <div class="chat-group" id="group-2">
                <strong>Work</strong>

                <a href="#"><span class="user-status is-offline"></span> <em>Robert J. Garcia</em></a>
                <a href="#" data-conversation-history="#sample_history_2"><span class="user-status is-offline"></span>
                    <em>Daniel A. Pena</em></a>
                <a href="#"><span class="user-status is-busy"></span> <em>Rodrigo E. Lozano</em></a>
            </div>


            <div class="chat-group" id="group-3">
                <strong>Social</strong>

                <a href="#"><span class="user-status is-busy"></span> <em>Velma G. Pearson</em></a>
                <a href="#"><span class="user-status is-offline"></span> <em>Margaret R. Dedmon</em></a>
                <a href="#"><span class="user-status is-online"></span> <em>Kathleen M. Canales</em></a>
                <a href="#"><span class="user-status is-offline"></span> <em>Tracy J. Rodriguez</em></a>
            </div>

        </div>

        <!-- conversation template -->
        <div class="chat-conversation">

            <div class="conversation-header">
                <a href="#" class="conversation-close"><i class="entypo-cancel"></i></a>

                <span class="user-status"></span>
                <span class="display-name"></span>
                <small></small>
            </div>

            <ul class="conversation-body">
            </ul>

            <div class="chat-textarea">
                <textarea class="form-control autogrow" placeholder="Type your message"></textarea>
            </div>

        </div>

    </div>


    <!-- Chat Histories -->
    <ul class="chat-history" id="sample_history">
        <li>
            <span class="user">Art Ramadani</span>
            <p>Are you here?</p>
            <span class="time">09:00</span>
        </li>

        <li class="opponent">
            <span class="user">Catherine J. Watkins</span>
            <p>This message is pre-queued.</p>
            <span class="time">09:25</span>
        </li>

        <li class="opponent">
            <span class="user">Catherine J. Watkins</span>
            <p>Whohoo!</p>
            <span class="time">09:26</span>
        </li>

        <li class="opponent unread">
            <span class="user">Catherine J. Watkins</span>
            <p>Do you like it?</p>
            <span class="time">09:27</span>
        </li>
    </ul>


    <!-- Chat Histories -->
    <ul class="chat-history" id="sample_history_2">
        <li class="opponent unread">
            <span class="user">Daniel A. Pena</span>
            <p>I am going out.</p>
            <span class="time">08:21</span>
        </li>

        <li class="opponent unread">
            <span class="user">Daniel A. Pena</span>
            <p>Call me when you see this message.</p>
            <span class="time">08:27</span>
        </li>
    </ul>
</div>


<!-- Bottom Scripts -->
<script src="@{/js/main-gsap.js"></script>
<script src="@{/js/jquery-ui-1.10.3.minimal.min.js"></script>
<script src="@{/js/bootstrap.js"></script>
<script src="@{/js/joinable.js"></script>
<script src="@{/js/resizeable.js"></script>
<script src="@{/js/neon-api.js"></script>
<script src="@{/js/bootstrap-switch.min.js"></script>
<script src="@{/js/neon-chat.js"></script>
<script src="@{/js/neon-custom.js"></script>
<script src="@{/js/neon-demo.js"></script>

</body>
</html>